<template>
  <div class="Echarts">
    <div id="main" ref="tree" style="width: 1000px;height:500px;"></div>
  </div>
</template>

<script>

import {inject, reactive, onMounted, getCurrentInstance} from 'vue'

export default {
  name: "Tree",
  setup() {

    let $echarts = inject("echarts");
    let $http = inject("axios");
    let {proxy} = getCurrentInstance()

    let testData = reactive({})
    let xyData = reactive([])

    onMounted(() => {
      getData()
    })

    function initChart() {
      let chart = $echarts.init(proxy.$refs.tree);
      // 把配置和数据放这里
      chart.setOption({
        xAxis: {
          type: "category",
          data: xyData.map(item => item.month),
        },
        title: {
          text: '1998年上半年商城总消费额的变化情况',
          left: 'center'
        },
        tooltip: {
          trigger: "axis"
        },
        yAxis: {
          type: "value",
          scale: true
        },
        series: [
          {
            data: xyData.map(item => item.totalconsumption),
            type: "line",
          }
        ]
      });
    }

    let getData = function () {
      $http({
        url: "http://101.43.144.48:6789/api/data",
        method: "post",
        data: {
          "start": 199801,
          "end": 199806
        }
      }).then((res) => {
        testData = res.data
        filter()
        console.log(testData)
        console.log(xyData)
        initChart()
      })
    }

    let filter = function () {
      testData.sort((a ,b) => {
        return a.month - b.month
      })
      x:for (let data of testData) {
        for (let datan of xyData) {
          if (data.month === datan.month) {
            xyData.totalconsumption += xyData.totalconsumption
            continue x
          }
        }
        xyData.push({
          month: data.month,
          totalconsumption: data.totalconsumption
        })
      }
    }
  }
}
</script>
